import router, { constantRoutes, asyncRoutes } from '../../router'

// 状态（数据）
const state = () => {
  return {
    // 默认整合静态路由
    allRoutes: constantRoutes
  }
}
// mutations 修改数据的方法 同步
const mutations = {
  setRoutes(state, newRoutes) {
    state.allRoutes = newRoutes
  }
}
// actions 修改数据的方法 异步
const actions = {
  filterRoutes(context) {
    // 获取用户可以访问的 menus
    console.log(context.rootState)
    const _menus = context.rootState.user.userInfo.roles.menus
    // 和动态的路由去比较
    const _newRoutes = asyncRoutes.filter(v => {
      // 筛选children 并复制给children属性

      // // 直接赋值 会更改引用地址对应的数据
      // v.children = v.children.filter(child => {
      //   //   是否存在的接口 返回
      //   // 存在 true 不存在 false
      //   return _menus.includes(child.name)
      // })

      const _length = v.children.filter(child => {
        //   是否存在的接口 返回
        // 存在 true 不存在 false
        return _menus.includes(child.name)
      }).length
      //   到这 children筛选完毕了 是筛选之后的值
      // children 的长度为0
      // chileren 的长度不为0
      if (_length > 0) {
        return true
      } else {
        return false
      }
    })
    // 追加404页面规则
    // 保证 统配在末尾
    _newRoutes.push({ path: '*', redirect: '/404', hidden: true })
    // addRoutes 动态添加
    router.addRoutes(_newRoutes)
    // 合并到vuex默认的数组中
    // 静态路由  和 动态生成的路由合并 并赋值
    context.commit('setRoutes', [
      ...constantRoutes,
      ..._newRoutes //  404 page must be placed at the end !!!
    ])
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
